﻿@{
    ViewBag.Title = "ReportChart";
    Layout = "~/Views/Shared/_PageLayout.cshtml";
}

@section HeadSection
{
    @*<script src="../../Scripts/Highcharts/highcharts.js"></script>*@
    <script src="../../Scripts/Highcharts/highstock.js"></script>
    <script src="../../Scripts/public.js"></script>
    <script type="text/javascript">
        $(function () {
            var beginTime = getNowZeroDate();
            var endTime = getNowFormatDate();
            //加载初始数据
            getJsonData(beginTime, endTime);
        });
        //获取数据
        function getJsonData(beginTime, endTime) {
            $.getJSON("/Report/GetReportJson?beginTime=" + beginTime + "&endTime=" + endTime + "", function (data) {
                var merchant_Arr = [];
                var count_Arr = [];
                var mobile_Arr = [];
                var qq_Arr = [];
                var gift_Arr = [];
                var flowpacket_Arr = [];
                var wxhb_Arr = [];
                if (data.rows.length > 0) {
                    for (var i = 0; i < data.rows.length; i++) {
                        var row = data.rows[i];
                        var merc = row.UserTitle;
                        var m = row.Mobile;
                        var q = row.QQ;
                        var g = row.Gift;
                        var p = row.FlowPacket;
                        var wx = row.WeiXinHB;
                        var c = row.Mobile + row.QQ + row.Gift + row.WeiXinHB;
                        merchant_Arr.push(merc);
                        count_Arr.push(c);
                        mobile_Arr.push(m);
                        qq_Arr.push(q);
                        gift_Arr.push(g);
                        flowpacket_Arr.push(p);
                        wxhb_Arr.push(wx);
                    }
                }
                var chart1 = new Highcharts.Chart({
                    chart: {
                        type: "column",
                        renderTo: "container1",
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                    },
                    credits: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    title: {
                        text: '充值报表'
                    },
                    subtitle: {
                        text: beginTime + ' - ' + endTime,
                        align: 'center',
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '数量'
                        }
                    },
                    scrollbar: {
                        enabled: true
                    },
                    xAxis: {
                        labels: {
                            step: 1
                        },
                        categories: merchant_Arr,
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y} </b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                    series: [
                    {
                        name: '总数',
                        data: count_Arr
                    },
                    {
                        name: '话费',
                        data: mobile_Arr
                    }
                    , {
                        name: 'Q币',
                        data: qq_Arr
                    }, {
                        name: '礼品卡',
                        data: gift_Arr
                    }, {
                        name: '流量包',
                        data: flowpacket_Arr
                    }, {
                        name: '微信红包',
                        data: wxhb_Arr
                    }
                    ]
                });
            });
        }
        //搜索
        function doSearch() {
            var beginTime = $("#beginTime").datetimebox('getValue');
            var endTime = $("#endTime").datetimebox('getValue');
            if (beginTime == "" || endTime == "") {
                beginTime = getNowZeroDate();
                endTime = getNowFormatDate();
                getJsonData(beginTime, endTime);
            }
            else {
                getJsonData(beginTime, endTime);
            }
        }
    </script>
}
<div>
    <div id="divsearch" class="easyui-panel" title="充值报表" style="padding: 5px; height: auto; background: #fafafa;"
         data-options="iconCls:'icon-save',closable:true,collapsible:true,minimizable:true,maximizable:true">
        <div>
            时间：
            <input class="easyui-datetimebox" id="beginTime" style="width: 150px" />
            -
            <input class="easyui-datetimebox" id="endTime" style="width: 150px" />
            <a href="#" class="easyui-linkbutton" onclick="doSearch();" iconcls="icon-search">搜索</a>
        </div>
    </div>
    <div class="easyui-panel" title="" style="padding: 5px;">
        <div class="box-title">
        </div>
        <div class="box-content" style="height: auto">
            <div id="container1" style="width: 100% auto; height: auto"></div>
        </div>
    </div>
</div>
